<template>
  <el-tabs @tab-click = "handleClick" class = "demo-tabs" v-model = "activeName">
    <el-tab-pane label = "Item属性" name = "first">
      <item-properties-panel ref = "formItemRef"/>
    </el-tab-pane>
    <el-tab-pane label = "表单属性" name = "second">
      <form-property-panel ref = "formRef"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ItemPropertiesPanel from "./ItemPropertiesPanel";
import FormPropertyPanel from "./FormPropertyPanel";
import {ref} from "vue";

export default {
  name: "PropertyPanel",
  components: {FormPropertyPanel, ItemPropertiesPanel},
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    activeTab: {type: Object, default: "first"}
  },
  data() {
    const activeName = ref(this.activeTab);
    return {
      panelIndex: 1,
      element: null,
      activeName,
      nodeElement: {},
      formData: {}
    }
  },
  methods: {
    handleClick() {

    },
    formInfoChange(data) {

    }
  },
  watch: {
    activeTab: {
      deep: true,
      handler: function () {
        this.activeName = this.activeTab;
      }
    }
  }
}
</script>

<style lang = "scss" scoped>
.demo-tabs {
  background: #fff;
  padding: 5px;
  height: 100%;
  min-width: 300px;
}

/deep/ .el-tabs__content {
  height: 100%;

  .el-tab-pane {
    height: 100%;

    .el-scrollbar {
      height: 100%;
    }
  }
}
</style>
